<template>
	<view class="collect">
		<view class="paging">
			<z-paging ref="paging" :auto="false" :fixed="false">
				<view class="paging-item">
					<view>
						<image class="image" src="../static/image/drug.png"></image>
					</view>
					<view class="content">
						<view class="name">白芷</view>
						<view class="dec">别名：白及，甘根、连及草，臼根，白给,白及，甘根、连及草，臼根，白给</view>
					</view>
					<view>
						<u-icon name="star-fill" color="#b98e4e" size="48"></u-icon>
					</view>
				</view>
				<view class="paging-item">
					<view>
						<image class="image" src="../static/image/drug.png"></image>
					</view>
					<view class="content">
						<view class="name">白芷</view>
						<view class="dec">别名：白及，甘根、连及草，臼根，白给,白及，甘根、连及草，臼根，白给</view>
					</view>
					<view>
						<u-icon name="star-fill" color="#b98e4e" size="48"></u-icon>
					</view>
				</view>
				<view class="paging-item">
					<view>
						<image class="image" src="../static/image/drug.png"></image>
					</view>
					<view class="content">
						<view class="name">白芷</view>
						<view class="dec">别名：白及，甘根、连及草，臼根，白给,白及，甘根、连及草，臼根，白给</view>
					</view>
					<view>
						<u-icon name="star-fill" color="#b98e4e" size="48"></u-icon>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.collect{
		.paging{
			height: calc(100vh - 148rpx);
			background: #f7f5f0;
			padding: 30rpx 20rpx;
			.paging-item{
				display: flex;
				align-items: center;
				background: #fff;
				border-radius: 12rpx;
				padding: 16rpx 20rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				.image{
					width: 176rpx;
					height: 176rpx;
					border-radius: 12rpx;
					background: #f7f5f0;
				}
				.content{
					margin: 0 20rpx;
					.name{
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
					}
					.dec{
						font-size: 28rpx;
						color: #959490;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						white-space: normal;
					}
				}
			}
		}
	}
</style>